<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 让 IE 浏览器运行最新的渲染模式下 -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="css/Normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <title>森茉文化传媒</title>
</head>
<style>
  html {
    background-color: rgba(238, 238, 238, 1);
  }

  .video-style {
    position: relative;
  }

  .tab-header {
    height: 4rem;
    background-color: white;
  }

  .tab-header>div {
    padding-left: 18rem;
    line-height: 4rem;
  }

  .tab-header ul>li {
    color: #999;
    margin: 0 1.5rem;
    cursor: pointer;
    display: inline-block;
    transition: .3s linear;
  }

  .tab-header ul>li.active {
    color: #1a1a1a !important;
    border-bottom: 2px solid #1a1a1a;
  }

  .search-video-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 16rem;
    padding: 0;
  }

  .picture-list {
    display: block;
    margin: 0 18rem 0 18rem;
    margin-left: 19%;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }

  .video-list-title {
    font-size: 1rem;
  }

  .video-list-desc {
    font-size: 0.8rem;
  }

  .picture-item {
    position: relative;
    margin-top: 1.5rem;
  }

  .search-content {
    padding-top: 3rem;
  }

  .picture-item-title {
    font-size: 1rem;
    display: none;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    position: absolute;
    bottom: 0;
    text-align: center;
    background: rgba(26, 26, 26, .5);
    color: rgba(255, 255, 255, 1);
  }
</style>

<body>
  <header class="header"></header>
  <section class="tab-header">
    <div>
      <ul class="font-Regular font-size-16">
        <li value="0" class="active">视频</li>
        <li value="1">照片</li>
        <li value="2">全景视频</li>
        <li value="3">全景图片</li>
      </ul>
    </div>
  </section>
  <section class="search-content">
    <div class="video detail-container">
      <div class="search-video-list"></div>
    </div>
    <div class="picture detail-container none">
      <div class="picture-list"></div>
    </div>
    <div class="vr-video detail-container none">
      <div class="search-video-list"></div>
    </div>
    <div class="vr-picture detail-container none">
      <div class="picture-list"></div>
    </div>
  </section>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="./js/BaseJs.js"></script>
  <script>
    var search = BaseJs.getUrlSearch(window.location.href);
    var htmlPicture = "";
    var htmlVideo = "";
    var htmlVrPicture = "";
    var htmlVrVideo = "";
    BaseJs.getData(BaseJs.api + '/media?keyword=' + search, function (item) {
      // 如果是视频
      for (var i in item) {
        console.log(item[i].type);
        switch (item[i].type) {
          // 图片
          case 0:
            htmlPicture += '<div class="picture-item"><a href="./picture-detail.html?id=' + item[i].id +
              '"><img class="width100" src=' +
              item[i].cover +
              '><div class="picture-item-title font-Regular">' + item[i].title + '</div></a></div>'
            break;
            // 视频
          case 1:
            var t = BaseJs.timer_format(item[i].duration);
            htmlVideo += '<a href=./video-detail.html?id=' + item[i].id +
              '><div class="mar30 video-style"><img class="video-img" src=' +
              item[i].cover +
              '><div class="hover-img"><img class="hover-control" src="./images/ic_video_start@2x.png"><p class="video-list-title">' +
              item[i].title + '</p><p class="video-list-desc">' + item[i].description +
              '</p></div><div class="vide-list-time">' + t + '</div></div></a>'
            break;
            // 全景图片
          case 2:
            htmlVrPicture += '<div class="picture-item"><a href=' + item[i].url +
              '><img class="width100" src=' +
              item[i].cover +
              '><div class="picture-item-title">' + item[i].title + '</div></a></div>'
            break;
          case 3:
            htmlVrVideo += '<a href=./vr-video-detail.html?id=' + item[i].id +
              '><div class="mar30 video-style"><img class="video-img" src=' +
              item[i].cover +
              '><div class="hover-img"><img class="hover-control" src="./images/ic_video_start@2x.png"><p class="video-list-title">' +
              item[i].title + '</p><p class="video-list-desc">' + item[i].description +
              '</p></div><div class="vide-list-time">02:50</div></div></a>'
            break;
        }
      }
      $('.video .search-video-list').append(htmlVideo);
      $('.picture .picture-list').append(htmlPicture);
      $('.vr-picture .picture-list').append(htmlVrPicture);
      $('.vr-video .search-video-list').append(htmlVrVideo);
      $('.video-style').hover(function () {
        $(this).find('.hover-img').css("display", "block");
      }, function () {
        $(this).find('.hover-img').css('display', 'none');
      })
      $('.picture-item').hover(function () {
        $(this).find('.picture-item-title').css("display", "block");
      }, function () {
        $(this).find('.picture-item-title').css('display', 'none');
      })
    })
    $('.header').append(BaseJs.htmlHeader);
    var targetId = 0;
    $('.tab-header div ul').click(function (e) {
      if (e.target.nodeName === "LI") {
        // 移出上一个li
        $(this).children().eq(targetId).removeClass("active");
        // $('.search-content').children().eq(targetId).css("display", "none");
        $('.search-content').children().eq(targetId).hide();

        targetId = e.target.value;
        e.target.setAttribute("class", "active");
        $('.search-content').children().eq(targetId).show();
      }
    })

    $('#search-btn').click(function (e) {
      BaseJs.searchEvent(e);
    })
    BaseJs.searchBtnHover();
  </script>
</body>

</html>